<template>
  <div class="setting-contianer">

    <!-- 顶部导航栏 -->
    <van-nav-bar title="比赛设置" class="Nav-bar">
      <van-icon  slot="right" name="play-circle-o" color="white" @click="gotolink"/>
    </van-nav-bar>

    <!-- 比赛设置组件 -->
    <van-tabs v-model="active" @click="onClick">
      <van-tab title="比赛设置">
        <TourSettings></TourSettings>
      </van-tab>

      <!-- 我奥一队组件 -->
      <van-tab :title='this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].text1' name="First_team">
        <firstTeam></firstTeam>
      </van-tab>
      <!-- 我奥二队组件 -->
      <van-tab :title='this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].text2' name="Second_team">
        <secondTeam></secondTeam>
      </van-tab>
    </van-tabs>
    <!-- <h3>工作台已经导入啦</h3> -->
    <router-view></router-view>
  </div>
</template>

<script>

import '@/css/all.css'
import TourSettings from '@/components/Tournament-settings/Tournament-settings'
import firstTeam from '@/components/First-team/first-team-setting.vue'
import secondTeam from '@/components/Second-team/second-team-setting.vue'
import { mapState } from 'vuex'

export default {
  name: 'view-settings',
  data () {
    return {
      team: '',
      active: 0,
      show: false
    }
  },
  computed: {
    ...mapState(['team1', 'CreateLeague', 'creatDataId', 'logoindex'])
  },
  components: {
    TourSettings,
    firstTeam,
    secondTeam

  },
  methods: {
    gotolink () {
      this.$router.push('/Statistics')
    },
    onClick(name, title) {
      this.team = name
      // this.$toast(this.team)
      // console.log(this.creatDataId, this.CreateLeague)
      // 将 setting.vue 中的队伍信息 发送给vuex 中的team1
      this.$store.commit('team_function', this.team)
    }
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
  .Nav-bar{
    background-color: black;
  }
  .setting-contianer{
    height: 100%;
    background-color: rgb(190, 190, 190);
}
::v-deep .van-nav-bar__title{
  color: white;
}

</style>
